<template>
  <div class="">
    <el-form :inline="true" :model="ser" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="ser.nickname"></el-input>
      </el-form-item>
      <el-form-item label="mobile">
        <el-input v-model="ser.mobile" placeholder="电话"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 搜索表单 -->

    <el-table :data="reslist" border style="width: 100%">
      <el-table-column prop="uid" label="id"> </el-table-column>
      <el-table-column prop="nickname" label="姓名"> </el-table-column>
      <el-table-column label="头像">
        <template slot-scope="scope">
          <img class="avatar" :src="scope.row.avatar" alt="" />
        </template>
        <!-- 在这里scope.row代表一行数据 就相当于是item ,scope.$index代表下标-->
      </el-table-column>
      <el-table-column prop="mobile" label="电话号码"> </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          {{ scope.row.status ? "启用" : "禁用" }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="200">
        <template slot-scope="scope">
          {{ scope.row.created_at | filtime }}
          <!-- 创建时间给我们的数据是一个秒数，我们通过过滤器给它变成一个正常的时间 -->
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="remove(scope.$index)">删除</el-button>
          <el-button @click="edit(scope.row, scope.$index)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 展示数据的表格 -->

    <!-- 写在组件两个标签中间的内容我们把它叫做插槽 -->

    <el-dialog title="修改" :visible.sync="showEdit">
      <el-form :model="form">
        <el-form-item label="姓名">
          <el-input v-model="form.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.mobile" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showEdit = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑弹框 -->

    <el-pagination
      background
      layout="prev, pager, next"
      :total="list.length"
      :page-size="pagesize"
      @current-change="changepage"
    >
      <!-- @current-change这个事件在每次当前页发生改变的时候都会触发，默认的参数是当前是第几页 -->
    </el-pagination>
    <!-- 分页器 -->
    <!-- json实现分页的原理是知道每页多少条 以及当前是第几页 然后对json进行切割 -->
    <!-- ：page-size 代表每页多少条 -->
    <!-- 当前是第几页可以通过事件current-change知道 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      //列表数据
      copylist: [],
      //复制的列表数据
      showEdit: false,
      //编辑弹框是否出现
      form: {
        nickname: "",
        mobile: "",
      },
      //跟编辑弹框里的form双向数据绑定
      flag: -1,
      //用来保存修改的数据下标
      ser: {
        nickname: "",
        mobile: "",
      },
      //搜索框对应的双向数据绑定

      pagesize: 3,
      // 规定分页每页多少条
      pagenum: 1,
    };
  },
  created() {
    this.$axios.get("list.json").then((res) => {
      console.log(res);
      this.list = res.data;
      this.copylist = res.data;
    });
  },
  //进入页面请求数据 给list和copylist都赋值
  methods: {
    remove(index) {
      this.list.splice(index, 1);
    },
    //删除
    edit(item, index) {
      this.flag = index;
      this.showEdit = true;
      this.form.nickname = item.nickname;
      this.form.mobile = item.mobile;
      //回填
    },
    //点击编辑回填并且保存编辑的下标
    update() {
      this.list[this.flag].nickname = this.form.nickname;
      this.list[this.flag].mobile = this.form.mobile;
      this.showEdit = false;
    },
    //点击编辑弹框里的确定 修改数据
    search() {
      this.list = this.copylist.filter((item) => {
        return (
          item.nickname.includes(this.ser.nickname) &&
          item.mobile.includes(this.ser.mobile)
        );
      });
    },
    //搜索效果
    reset() {
      this.list = this.copylist;
    },
    //重置

    changepage(val) {
      console.log(val);
      //默认的参数代表当前是第几页
      this.pagenum = val;
      //把当前是第几页保存下来
    },
  },
  computed: {
    reslist() {
      return this.list.slice(
        this.pagesize * (this.pagenum - 1),
        this.pagesize * this.pagenum
      );
      // slice 是根据下标对数据进行截取 包头不包尾

      // 第一页 0-4
      // 第二页 5-9
      // 第三页 10-14
      // 第四页 15-19
    },
    //用计算属性进行分页 只要页码和pagesize发生改变就会重新对数组进行 计算 分页  注意：上面表格里展示数据展示的 是 分页之后的结果
  },

  filters: {
    filtime(val) {
      let time = new Date(val * 1000);
      return time.toLocaleString();
    },
    //过滤时间格式
  },
};
</script>

<style lang="scss" scoped>
.avatar {
  width: 50px;
  height: 50px;
}
</style>
